<template>
    <div class="main-container"  :class="wrap?'main-wrap-container':'main-no-wrap-container'" id="search-mixin-id">
    <main-content :title="contentTitle" >
        <!-- <div slot="search"  v-if="showSearchBox">
          <SearchBox 
            v-if="showSearchBox"
            :searchParamsList="searchParamsList" 
            :searchParam.sync="searchParam" 
            @searchBoxParams="searchClick" 
            @searchReset="searchReset" 
            ></SearchBox> 
        </div> -->
        <div slot="table">
        <!-- 在此处放置表格内容 -->
            <avue-crud ref="electricity_cost_records_dayTable" :data="listData" :showColumn="showColumn" :isSaveColumns="true" @selection-change="selectionChange" id="printTable" :option="option" stripe :page.sync="page"
                       @on-load="onPageLoad"
                       @row-dblclick="handleRowDBLClick"
                       @sort-change="sortChange" 
                       @current-row-change="handleCurrentRowChange" >
                 <template slot="menuLeft">
                     <el-button type="primary"  v-if="hasButtonPermission('electricity_cost_records_day:print')" icon="el-icon-printer" size="small" @click="printForm">{{$t("editorModule.print")}}</el-button>
                </template>
            </avue-crud>
        </div>
    </main-content>
    <createFlow v-if="isCreateFlow" formType="2" rowPrimaryKey="fid" :UrlAddress="this.$options.name" :createFlowType="createFlowType" :row="scopeRow" :scheme="scheme" @closedCreateFlow="closedCreateFlow"></createFlow>
    </div>
</template>
<script>
      import createFlow from '@/components/formInitiationProcess/createFlow';
      import schemeMixins from '@/components/formInitiationProcess/schemeMixins';
     import MainFixed from "@/page/main/MainFixed";
      import authorizeMixin from "@/mixins/authorize";
      import tableOptionMixin from "@/mixins/tableOption"; //table 高度计算
      import tableSearchMixin from "@/mixins/tableSearch"; //table 搜索 
      import displayColumnsMixin from "@/mixins/displayColumns"; //表格展示列显隐保存 
     import MainContent from "@/page/main/MainContent";
      import request from '@/router/axios';
      import { baseUrl } from '@/config/env';
      import { getOrder } from '@/util/util';
     export default {
         name: "electricity_cost_records_day",
         mixins: [authorizeMixin,tableOptionMixin,tableSearchMixin,displayColumnsMixin,schemeMixins],
         components: { MainContent, createFlow,MainFixed },
		 props: ['year', 'month','identifyId','roomNumber'],
         data() {
              return {
				 	  btns:[
				 	     'electricity_cost_records_day:refresh',
				 	     'electricity_cost_records_day:add',
				 	     'electricity_cost_records_day:view',
				 	     'electricity_cost_records_day:modify',
				 	     'electricity_cost_records_day:delete',
				 	     'electricity_cost_records_day:batchDelete',
				 	     'electricity_cost_records_day:print'
                   ],
                   page: {
                       pageSize: 20,
                       total: 0,
                       currentPage: 1,
                       layout: "total, prev, pager, next, jumper"
                   },
                   ids: '',
                   listData: [],
                   keyValue: '',
                   flag:false,
                   isEdit: true, // 查看-不显示按钮,
                   disabled: false, // 查看-禁用input,
                   isWorkflowForm:false,//默认值 false
                   defaultOrderfield:'',//默认排序字段
                   defaultOrder:'',//默认排序
                   searchParam: {},
                   defaultProps: {
                       children: 'children',
                       label: ''
                   },
                   option:{
                       rowKey:'fid',
                       highlightCurrentRow: true,
                       stripe: true,
                       addBtn: false,
                       tip:false,
                       menuWidth: 0,
                       border: true,
                       page: true,
                       selection: false,
                       index: true,
                       menu: true,
                       indexLabel: this.$t('custmerForm.tableNumber'),
                       align: 'center',
                       menuAlign: 'left',
                       delBtn: false,
                       editBtn: false,
                       column: [
                           {
                               sortable: true,
                               label: this.$t("姓名"),
                               prop: 'identify_name',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("身份证"),
                               prop: 'identify_id',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("事业部"),
                               prop: 'division',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("部门"),
                               prop: 'department',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("房号"),
                               prop: 'room_number',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("日期"),
                               prop: 'date',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("用电量"),
                               prop: 'eng',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("分摊比例"),
                               prop: 'proportion',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("分摊电量"),
                               prop: 'eng_reality',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("电费单价"),
                               prop: 'electricity_price',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("分摊电费"),
                               prop: 'cost',
                               overHidden: true,
                           },
                       ]
                   }
              }
                   },
                   created() {
                       //是否有编辑 查看 删除 发起流程 发起临时流程权限 无则为操作列不显示
                       let oprBtns = ['electricity_cost_records_day:modify','electricity_cost_records_day:view','electricity_cost_records_day:delete','electricity_cost_records_day:createFormFlow','electricity_cost_records_day:createDesignFlow'];
                       let intersection = this.btns.filter((v) => oprBtns.includes(v)); 
                       this.option.menu = false
                       if(this.btns.length>0){
                       	let tempBtns =  this.btns.concat(oprBtns).filter((v) => this.btns.includes(v) && !oprBtns.includes(v));
                       	if(tempBtns.length>0){
                       		this.searchBtns  = [...new Set([...tempBtns])];
                       	}
                       }
                   },
                   methods: {
                         handleRowDBLClick (row, event) {
                         	if(this.hasBtns('electricity_cost_records_day:modify')&&this.hasButtonPermission('electricity_cost_records_day:modify')&&this.openDoubleClickEdit){
                         		this.editForm(row)
                         	}
                         },
                         handleCurrentRowChange(row){
                         	this.$refs.electricity_cost_records_dayTable.toggleSelection([row]);
                         },
                         printForm() {
                         	let element = window.document.getElementById("printTable");
                         	setTimeout(() => {
                         	  html2canvas(element, {
                         		backgroundColor: null,
                         		useCORS: true,
                         		windowHeight: document.body.scrollHeight
                         	  }).then(canvas => {
                         		const url = canvas.toDataURL();
                         		this.printImg = url;
                         		printJS({
                         		  printable: url,
                         		  type: "image",
                         		  documentTitle: '打印',
                         		  scanStyles: false,
                         		  repeatTableHeader: false,
                         		  header: null
                         		});
                          	  });
                         	}, 1);
                           },
                         hasBtns(encode){
                         	return this.btns.includes(encode);
                         },
                         /**发起流程 */
                         CreateDesignFlow(val) {
                            this.createFlowType = 0;
                            this.scopeRow = val;
                            this.changeSystemSchemeInfo();
                         },
                         CreateFormFlow(val) {
                            this.createFlowType = 1;
                            this.scopeRow = val;
                            this.isCreateFlow = true;
                         },
                         /* 获取公司用户数据 */
                         getListData() {
                         	if(!this.searchParam.order){
                         		this.searchParam.orderfield = this.defaultOrderfield;
                         		this.searchParam.order = this.defaultOrder;
                         	}
                            let params = this.searchParam;
							params.year = this.year;
							params.month = this.month;
							params.identifyId = this.identifyId;
							params.roomNumber = this.roomNumber;
							request({
                                url: baseUrl + '/electricity_cost_records_day',
                                method: 'get',
                                params: params
                            }).then(res =>{
                                this.listData = res.data.data.Rows
                                this.page.total = res.data.data.Total;
								for(let i = 0; i<res.data.data.Total;i++)
								{
									this.listData[i].proportion = this.listData[i].proportion*100 +'%';
									
								}
								
                            })
                         },
                         /* 页面加载 */
                         onPageLoad(page) {
                            this.searchParam.limit = page.currentPage;
                            this.searchParam.size = page.pageSize;
                            this.getListData();
                         },
                          /* 分页 */
                         sortChange(data) {
                         	if(data.order){
                         		let order= getOrder(data.order);
                         		this.searchParam.order = order;
                         		this.searchParam.orderfield = data.prop;
                         	}else{
                         		this.searchParam.order = this.defaultOrder;
                         		this.searchParam.orderfield = this.defaultOrderfield;
                         	}
                         	this.getListData()
                         },
                          /* 弹窗回调 */
                          dialogChange(b){
                              this.flag = false;
                              this.$nextTick(()=>{
                              this.getListData();
                         })},
                          /* 查询 */
                           searchClick(params) {
                            this.page.currentPage=1;
                            this.searchParam.limit = 1;
                            this.searchParam.size = this.page.pageSize;
                            this.searchParam = params;
                            this.getListData()
                         },
                           /* 查询表单重置 */
                           searchReset() {
                            for (const key in this.searchParam) {
                                 if(this.searchParam[key]){
                                     this.searchParam[key] = null;
                                 }
                            }
                            this.page.currentPage=1;
                            this.searchParam.limit = 1;
                            this.searchParam.size = this.page.pageSize;
                            this.getListData();
                         },
                           selectionChange(list){
                             this.ids = list.map((x) => x.fid).join(',');
                           },
         }
     }
</script>
<style scoped>
.searchBox {
   width: calc(100% - 218px);
   display: inline-block;
}
.main-container{
   height: 100%!important;
   padding: 0 8px!important;
}
div /deep/ .custom-tree-node span{
   font-size: 14px;
   padding-left: 10px;
}
div /deep/ .custom-tree-node i{
   font-size: 12px;
}
div /deep/ .el-dialog__body{
height: 70vh;
overflow: scroll;
}
</style>
